<template>
  <div class="check-home">
    <div class="c-box check-top">
      <!-- 基础信息部分 -->
      <div class="upload-title-box">
        <i class="el-icon-back" style="font-weight: 700; cursor: pointer" @click="cancel" />
        <b> &nbsp;| &nbsp;</b>
        <div class="upload-title">任务信息</div>
      </div>
      <div class="check-body">
        <el-row>
          <el-col :span="24">
            <span>任务名称：</span><span>{{ formData.taskName }}</span>
          </el-col>
        </el-row>
        <el-row style="margin: 20px 0">
          <el-col :span="24">
            <span>任务描述：</span><span>{{ formData.taskNotes }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span>盘点范围：</span>
            <span>
              <span>责任部门：{{ formData.departmentName }} &nbsp;</span>
              <span style="margin: 0 20px">设备类型：{{ formData.assetTypeName }}&nbsp;</span>
              <span>存放位置：{{ formData.positionName }}&nbsp;</span>
            </span>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="c-box check-down">
      <div class="upload-title-box">
        <div class="upload-title" style="padding-top: 20px">
          <span style="margin-right: 20px">盘点结果</span>
          <el-radio-group
            v-model="queryParams.inventoryType"
            :fill="
              queryParams.inventoryType === '4'
                ? '#dda451'
                : queryParams.inventoryType == '3'
                ? '#589ef8'
                : queryParams.inventoryType == '1'
                ? '#7ebf50'
                : queryParams.inventoryType == '2'
                ? '#e57471'
                : ''
            "
            @input="changeRadio">
            <!-- <el-radio-button label="0">未盘点：21</el-radio-button>
            <el-radio-button label="1">账实相符：11</el-radio-button>
            <el-radio-button label="2">变更：22</el-radio-button>
            <el-radio-button label="3">盘盈：33</el-radio-button>
            <el-radio-button label="4">盘亏：44</el-radio-button> -->
            <el-radio-button v-for="item in dictList.inventoryStatusList" :key="item.dictKey" :label="item.dictKey">
              {{ item.dictValue }}：{{
                item.dictKey === '0'
                  ? formData.notInventoried
                  : item.dictKey === '1'
                  ? formData.inventoryProfit
                  : item.dictKey === '2'
                  ? formData.inventoryLoss
                  : item.dictKey === '3'
                  ? formData.changeQuantity
                  : formData.accountsMatch
              }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="check-body">
        <search-form
          :data="queryParams"
          :field-list="fieldList"
          :list-type-info="dictList"
          :is-asset="true"
          style="padding-bottom: 0rem"
          @handleSearch="handleQuery"
          @handleReset="resetQuery" />
        <div class="check-table">
          <el-table :data="tableData" style="width: 100%" :height="300" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
            <el-table-column prop="assetName" label="设备名称">
              <template slot-scope="scope">
                <div v-if="scope.row.synchronousStatus == '1'">
                  <!-- 未同步 -->
                  <el-button
                    v-if="scope.row.inventoryType !== '盘盈'"
                    size="mini"
                    type="text"
                    @click="toDetail(scope.row)"
                    >{{ scope.row.assetName }}</el-button
                  >
                  <span v-else style="font-size: 12px; padding: 9px 15px">{{ scope.row.assetName }}</span>
                </div>
                <div v-else>
                  <el-button
                    v-if="scope.row.inventoryType !== '盘亏'"
                    size="mini"
                    type="text"
                    @click="toDetail(scope.row)"
                    >{{ scope.row.assetName }}</el-button
                  >
                  <span v-else style="font-size: 12px; padding: 9px 15px">{{ scope.row.assetName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="assetCode" label="设备编号">
              <template slot-scope="scope">
                <div v-if="scope.row.synchronousStatus == '1'">
                  <!-- 未同步 -->
                  <el-button
                    v-if="scope.row.inventoryType !== '盘盈'"
                    size="mini"
                    type="text"
                    @click="toDetail(scope.row)"
                    >{{ scope.row.assetCode }}</el-button
                  >
                  <span v-else style="font-size: 12px; padding: 9px 15px">{{ scope.row.assetCode }}</span>
                </div>
                <div v-else>
                  <el-button
                    v-if="scope.row.inventoryType !== '盘亏'"
                    size="mini"
                    type="text"
                    @click="toDetail(scope.row)"
                    >{{ scope.row.assetCode }}</el-button
                  >
                  <span v-else style="font-size: 12px; padding: 9px 15px">{{ scope.row.assetCode }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="assetType" label="设备类型" />
            <el-table-column prop="storageLocation" label="存放位置" />
            <el-table-column prop="ownerName" label="责任人" />
            <el-table-column prop="inventoryType" label="盘点状态" />
            <el-table-column prop="inventoryTime" label="盘点时间" />
            <el-table-column prop="operate" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.synchronousStatus == '1'"
                  size="mini"
                  type="text"
                  @click="handleRecord([...scope.row.id])"
                  >同步到资产库</el-button
                >
                <span v-else style="font-size: 12px">已同步</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="display: flex; justify-content: space-between; padding-top: 20px">
          <div>
            <el-dropdown placement="top" @command="handleCommand">
              <el-button type="primary">同步到资产库<i class="el-icon-arrow-down el-icon--right" /></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">同步全部数据</el-dropdown-item>
                <el-dropdown-item command="1" :disabled="ids.length == 0">同步选中数据</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <pagination
            v-if="total >= 0"
            :total="Number(total)"
            :page.sync="queryParams.current"
            :limit.sync="queryParams.size"
            style=""
            @pagination="changePage" />
        </div>
      </div>
    </div>
    <!-- <div class="check-foot">
      <el-button @click="cancel">返回</el-button>
    </div> -->
  </div>
</template>
<script>
import { getDict } from '@/api/specialProject/assetRecords'
import { resultList, synchronousAssets, getDetail } from '@/api/specialProject/Inventory'
import SearchForm from '@/components/HkSearchform/index.vue'

export default {
  components: {
    SearchForm,
  },
  beforeRouteLeave(to, from, next) {
    console.log(to, '路由')
    if (to.path === '/specialProject/assets/assetLibraryDetail') {
      const condition = JSON.stringify(this.queryParams)
      sessionStorage.setItem('condition', condition)
    } else {
      sessionStorage.removeItem('condition')
    }
    next()
  },
  beforeRouteEnter(to, from, next) {
    console.log(to, '路由')
    if (from.path !== '/specialProject/assets/assetLibraryDetail') {
      sessionStorage.removeItem('condition')
    }
    next()
  },
  data() {
    return {
      formData: {},
      assetProps: {
        children: 'children',
        label: 'dictValue',
        value: 'id',
        emitPath: false,
        multiple: true,
      },
      queryParams: {
        current: 1,
        size: 10,
        taskId: null,
      },
      ids: [],
      tableData: [],
      total: 0,
      loading: false,
      // 搜索框
      fieldList: [
        {
          label: '盘点任务ID',
          type: 'input',
          field: 'taskId',
          hidden: true,
        },
        {
          label: '关键字',
          type: 'input',
          field: 'keyword',
          maxlength: 20,
          width: '258px',
          placeholder: '请输入设备编号、名称或责任人',
        },
        {
          label: '盘点状态',
          type: 'select',
          field: 'inventoryType',
          list: 'inventoryStatusList',
        },
        {
          label: '同步状态',
          type: 'select',
          field: 'synchronousStatus',
          list: 'statusList',
        },
      ],
      dictList: {
        inventoryStatusList: [],
        statusList: [
          {
            value: '1',
            label: '未同步',
          },
          {
            value: '2',
            label: '已同步',
          },
        ],
      },
    }
  },
  created() {
    var cd = sessionStorage.getItem('condition')
    if (cd) {
      var condition = JSON.parse(cd)
      this.queryParams = condition
    }
    if (this.$route.query.id) {
      this.queryParams.taskId = this.$route.query.id
      if (this.$route.query.assetCode) {
        this.queryParams.keyword = this.$route.query.assetCode
      }
      this.getData(this.$route.query.id)
    }
  },
  mounted() {
    this.getDictDatas()
  },
  methods: {
    changeRadio(e) {
      console.log(e, 'eeee')
      this.queryParams.inventoryType = e
      this.getDataList()
    },
    handleCommand(e) {
      if (e === '0') {
        // 全部
        synchronousAssets([]).then((res) => {
          this.$message.success('同步成功')
          this.getDataList()
        })
      } else {
        // 选中
        synchronousAssets(this.ids).then((res) => {
          this.$message.success('同步成功')
          this.getDataList()
        })
      }
    },
    // 复选框禁用
    selectable(row, index) {
      if (row.synchronousStatus === '2') {
        return false
      } else {
        return true
      }
    },
    handleSelectionChange(e) {
      this.ids = e.map((item) => item.id)
      console.log(this.ids)
    },
    // 分页
    changePage(e) {
      console.log(e)
      this.queryParams.current = e.page
      this.queryParams.size = e.limit
      this.getDataList()
    },
    // 获取详情
    getData(id) {
      getDetail(id).then((res) => {
        this.formData = res
        this.getDataList()
      })
    },
    // 跳转
    toDetail(row) {
      console.log(row)
      this.$router.push({
        path: '/specialProject/assets/assetLibraryDetail',
        query: {
          id: row.assetsId,
          title: '详情',
          dictValue: row.dictItems.dictValue,
          dictKey: row.dictItems.dictKey,
          dictId: row.dictItems.id,
        },
      })
    },
    // 同步资产库
    handleRecord(e) {
      synchronousAssets(e).then((res) => {
        this.$message.success('同步成功')
        this.getDataList()
      })
    },
    //  查询
    handleQuery() {
      this.queryParams.current = 1
      this.getDataList()
    },
    //  重置
    resetQuery() {
      this.queryParams.current = 1
      this.queryParams.size = 10
      this.queryParams.taskId = this.$route.query.id
      this.getDataList()
    },

    getDataList(val) {
      this.loading = true

      resultList(this.queryParams).then((res) => {
        res.list.forEach((element) => {
          for (const key in element) {
            element[key] = element[key] || '—'
          }
        })
        this.loading = false
        this.tableData = res.list
        this.total = res.total
        const condition = JSON.stringify(this.queryParams)
        sessionStorage.setItem('condition', condition)
      })
    },
    cancel() {
      this.$router.go(-1)
    },
    // 字典获取
    getDictDatas() {
      // 类型
      getDict({ code: 'inventoryType' }).then((res) => {
        this.dictList.inventoryStatusList = res.map((o) => {
          o.label = o.dictValue
          o.value = o.dictKey
          return o
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
#app.dark-theme {
  .check-home,
  .c-box,
  .my-foot {
    background: transparent !important;
  }
  .check-body {
    color: #fff;
  }
}
.check-home {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #eef0f5;
  .check-top {
    height: 200px;
    margin-bottom: 20px;
  }
  .check-down {
    flex: 1;
    // border: 1px solid #000;
    .heck-table {
      height: 100%;
    }
  }

  .c-box {
    background: #fff;
    border-radius: 4px;
    padding: 0 10px;

    .check-body {
      height: 100%;
      padding: 20px;
    }
  }

  .upload-title-box {
    height: 40px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    // border-bottom: 1px solid rgba($color: #000000, $alpha: 8%);

    .upload-title {
      font-size: 16px;
      font-weight: 700;
      color: #000000;
    }
  }
}
</style>
  